<template>
  <div class="foot" :style="{ background: bgc }">
    <span
      @click="arrindex = index"
      :class="{ isactive: arrindex === index ? true : false }"
      v-for="(item, index) in arr"
      :key="item.id"
      >{{ item.name }}
    </span>
    <div></div>
  </div>
</template>
<script>

export default {
  name: '',
  props: {
    arr: {
      type: Array,
      default: () => []
    },
    bgc: {
      type: String,
    },
    isactive: {
      type: String
    }

  },
  data () {
    return {
      arrindex: 0
    }
  },
  created () {
    console.log(this.isactive);
  },
  computed: {
  },
  methods: {
    btn () {
      console.log(1);
    }
  }
}
</script>
<style lang='less'  scoped>
.foot {
  // position: fixed;
  // left: 0;
  // bottom: 0;
  width: 100%;
  height: 80px;
  display: flex;
  justify-content: space-around;
  align-items: center;
  span {
    display: inline-block;
    cursor: pointer;
  }
  .isactive {
    border-bottom: 2px solid #7f4395;
    color: #7f4395;
  }
}
</style>
